<template>
  <div :style="{ '--color': `${background_color}` }">
    <c-title :hide="false" :text="this.$route.query.store_id?'门店商品':'搜索'"></c-title>
    <van-sticky>
      <van-search show-action v-model="keyword" placeholder="请输入搜索关键词" shape="round" @blur="searchBlur" @focus="hidebox" style="padding-bottom: 0;">
        <template #action>
          <div @click="searchOn" class="searchBtn">搜索</div>
        </template>
      </van-search>
      <!-- 搜索历史 -->
      <div style="background: #fff;">
        <!-- 动态获取到soso的高度，需要 元素显示隐藏，页面重绘 -->
        <!-- <div v-show="pageReload"></div> -->
        <transition name="fateOut" v-on:enter="fateOutEnter" v-on:after-leave="fateOutLeave">
          <sarchHistory v-show="showHistory" :isShowDelete="false" :storageName="storageName" ref="searchHistory" @clickTag="serachTag"></sarchHistory>
        </transition>
      </div>
      <!--筛选-->
      <div class="screen-content flex-a-c flex-j-sb">
        <div class="popularity" :class="query && query.order_field === 'popularity' ? 'on' : ''" @click="popularity">人气</div>
        <div class="flex-a-c salesOn" @click="salesClick(query.order_by)">
          <span :class="query.order_field === 'show_sales' ? 'on' : ''">销量</span>
          <div class="flex-a-c sort">
            <span
              class="iconfont icon-member-top"
              v-if="query.order_by === 'asc' && query.order_field === 'show_sales'"
              :class="query.order_by === 'asc' && query.order_field === 'show_sales' ? 'on' : ''"
            >
            </span>
            <span
              class="iconfont icon-member-bottom "
              v-if="query.order_by === 'desc' && query.order_field === 'show_sales'"
              :class="query.order_by === 'desc' && query.order_field === 'show_sales' ? 'on' : ''"
            >
            </span>
          </div>
        </div>
        <div class="flex-a-c" @click="priceClick(query.order_by)">
          <span :class="query.order_field === 'price' ? 'on' : ''">价格</span>
          <div class="flex-a-c sort">
            <span
              class="iconfont icon-member-top"
              v-if="query.order_by === 'asc' && query.order_field === 'price'"
              :class="query.order_by === 'asc' && query.order_field === 'price' ? 'on' : ''"
            ></span>
            <span
              class="iconfont icon-member-bottom "
              v-if="query.order_by === 'desc' && query.order_field === 'price'"
              :class="query.order_by === 'desc' && query.order_field === 'price' ? 'on' : ''"
            ></span>
          </div>
        </div>
        <div class="flex-a-c" @click="screeningPopup">
          <span>筛选</span>
          <span class="iconfont sort icon-fontclass-shaixuan"></span>
        </div>
      </div>
    </van-sticky>
    <!--搜索商品列表-->
    <div class="goods-list" v-if="goodsList.length > 0">
      <block v-for="(item, index) in goodsList" :key="item.id">
        <goods-item :purchaseItem="item" :city="query.city"></goods-item>
      </block>
    </div>
    <van-empty description="暂无数据" v-else />
    <!--筛选弹窗-->
    <screen-popup
      :screenShow="screenShow"
      :cakeType="cakeType"
      :getBrand="getBrand"
      :priceSnacks="priceSnacks"
      :category="categorys"
      :cakePriceArr="cakePriceArr"
      @screenClick="screenClick"
      @screenClose="screenClose"
    >
    </screen-popup>
  </div>
</template>
<script>
import sachertorteSearch_controller from "./sachertorteSearch_controller.js";
export default sachertorteSearch_controller;
</script>
<style lang="scss" scoped>
/* 公共样式 */
.screen-main {
  .van-cell {
    padding: 1.25rem 0 0 0;
  }

  .van-collapse-item__content {
    padding: 0;
  }
}

/* 筛选样式 */
.screen-content {
  width: 100%;
  box-sizing: border-box;
  background-color: #fff;
  padding: 0.75rem 1.75rem 0.75rem 2.25rem;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 0.75rem;

  .sort {
    flex-direction: column;
    margin: 0 0 0 0.25rem;
  }
}

.on {
  color: #e32323;
}

.salesOn {
  text {
    font-size: 0.75rem;
    line-height: 1.0625rem;
  }

  .iconfont {
    line-height: 0.75rem;
  }
}

.sort .icon-member-top,
.icon-member-bottom {
  font-size: 0.75rem;
  line-height: 0.75rem;
}

/* 搜索订单列表 */
.goods-list {
  margin: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  border-radius: 0.5rem 0.5rem 00 0;

  .goods-item {
    margin-bottom: 0.5rem;
    background-color: #fff;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
    width: 10.69rem;
    border-radius: 0.5rem 0.5rem 0 0;
  }
}

/* 品牌弹窗样式 */
.searchBtn {
  font-size: 0.75rem;
  line-height: 1.03rem;
  color: #fff;
  padding: 0.25rem 1rem;
  background: var(--color);
  border-radius: 1.09rem;
}
</style>
